<template>
  <div id="form">
    <form @submit.prevent="submit">
      <div>
        <label for="mobile">手机号:</label>
        <input
          class="ww"
          type="text"
          name="mobile"
          v-model="mobile"
          
          @blur="checkMobile"
          placeholder="请输入手机号"
        />
      </div>
      <div>
        <label for="code">验证码:</label>
        <input
          class="ww"
          type="text"
          name="code"
          v-model="code"
          placeholder="请输入验证码"
        />
        <send-code
          class="ww"
          :mobile="mobile"
          @checkmobile="hasCode"
        ></send-code>
      </div>
      <br />
      <input type="submit" :disabled="disabled" value="登录" />
    </form>
  </div>
</template>
<script>
import sendCode from "@/components/sendCode/sendCode";
const regMobile = /^1[3|5|6|7|8|9]\d{9}$/;
const regCode = /^\d{4}$/;
export default {
  name: "",
  components: {
    sendCode,
  },
  data() {
    return {
      disabled: true,
      mobile: "",
      code: "",
      isGetCode: false,
    };
  },
  methods: {
    showLoading(msg) {
      this.$loading.show(msg);
      setTimeout(() => {
        this.$loading.hide();
      }, 1000);
    },
    checkMobile(flag) {
      if (!regMobile.test(this.mobile)) {
        this.showLoading("手机号格式不正确");
      }
    },

    hasCode(flag) {
      if (!regMobile.test(this.mobile)) {
        this.showLoading("手机号格式不正确");
      }
      this.isGetCode = flag;
    },
    submit() {
      if (this.isGetCode) {
        if (!regCode.test(this.code)) {
          this.showLoading("验证码不正确");
        } else {
          this.showLoading("登录成功");
          this.$router.push("/about");
        }
      } else {
        this.showLoading("请先获取验证码");
      }
    },
  },
  watch: {
    mobile() {
      if (this.mobile && this.code) {
        this.disabled = false;
      } else {
        this.disabled = true;
      }
    },
    code() {
      if (this.mobile && this.code) {
        this.disabled = false;
      } else {
        this.disabled = true;
      }
    },
  },
};
</script>
<style scoped>
input {
  width: 150px;
}
form {
  padding-left: 30px;
}
.ww {
  margin-left: 10px;
}
form div {
  margin-top: 15px;
}
input[type="submit"] {
  display: block;
  width: 80px;
  margin: 0 auto;
  background-color: green;
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 5px 15px;
}
input[disabled] {
  background-color: #ccc;
  color: #333;
}
</style>